import './EditorMenuPanel.scss';
import {ref} from "vue";
import {designComponent} from "plain-ui-composition";

/**
 * 编辑器菜单面板
 * @author  韦胜健
 * @date    2022/1/22 19:12
 */
export const EditorMenuPanel = designComponent({
  name: 'EditorMenuPanel',
  props: {
    menuList: {
      type: Array,
      default: () => []
    }
  },
  setup() {

    const activeIndex = ref(0);

    return () => (
      <div class="cms-visual-editor-menu">
        <div class="cms-visual-editor-panel-side-bar cms-visual-editor-menu-side-bar">
        {menuList.map((panel, index) => (
          <div {...(() => {
            let attrs = { key: index };
            if (index == activeIndex.value) {attrs['data-active'] = 1;}
            return attrs;
          })()} onClick={() => activeIndex.value = index}><span>{panel.title}</span></div>
        ))}
      </div>
        <div class="cms-visual-editor-menu-body" data-scrolbar>
          {menuList[activeIndex.value]?.render()}
          <div style={{ height: '300px', width: '1px' }}/>
        </div>
      </div>
    );
  }
});
